import React from 'react';
import Taro from '@tarojs/taro';
import {View, Image, Text, Block} from '@tarojs/components'
import {Good} from '../../utils/server.interface'
import {RESOURCE_URL, TARO_ENV} from "../../constants/api";
import Float from '../../components/float/float';
import {platform} from '../../utils/platform-settting.service';
import './big-goods-box.scss'

const BigGoodsBox: React.FC<{ isUser: boolean; pkeys?: ''; data: Good[] }> = (props) => {
  const dataColor = Taro.getStorageSync('colorData');
  const getUrl = (url) => {
    if (props.pkeys) {
      url += '&pkeys=' + props.pkeys
    }
    return url
  }

  const renderRefundSignOfRight = (item) => {
    const refund_signArr = item.refund_sign ? item.refund_sign.split(",") : "";

    if(refund_signArr.length > 0) {
      return refund_signArr.map(sign => (
        !!sign &&
        <Text
          className={`label ${TARO_ENV + 'label'}`}
          style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
        >{sign}</Text>
      ))
    }

    return <Block />;
  }

  return (
    <View className='bigGoodsBox'>
      {props.data.map((item: any) => <View
        key={item.id} className='good-item' onClick={() => {
        Taro.navigateTo({url: getUrl(item.url)})
      }}
      >
        <View className='img-box'>
          <Image lazyLoad src={item.main_img || item.img} mode='aspectFill' className='img' />
          {!(item.is_free_visit && item.is_free_visit == 1 && (process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin')) &&
          <Block>
            {!!item.is_activity ? <Block>
              <Text className='discount' style={`background-color: ${dataColor.priceColor};`}>拼团价</Text>
            </Block> : <Block>
              {!!item.discount &&
              <Text className='discount' style={`background-color: ${dataColor.priceColor};`}><Text
                className='font-family-price'
              >{item.discount}</Text>折</Text>}
            </Block>}
          </Block>}
        </View>
        <View className='big-right'>
          <View>
            <View className='name'>{item.name}</View>
            {item.sub_title && <View className='subTitle'>{item.sub_title}</View>}
            {
              ((item.serviceLabels && item.serviceLabels.length > 0) || item.refund_sign) &&
              <View className='labels'>
                {item.serviceLabels && item.serviceLabels.length > 0 && item.serviceLabels.map((items, index) => <Text
                  key={index} className={`label ${TARO_ENV + 'label'}`}
                  style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
                >{items.name}</Text>)}
                {
                  process.env.P_ENV === 'kd' && item.refund_sign &&
                  renderRefundSignOfRight(item)
                }
              </View>
            }
            {!!platform.info.is_show_sales_volume && !!item.sales_volume &&
            <View className='salesVolume'>销量：{item.sales_volume}笔</View>}
          </View>
          <View className='bottom-salesVolume-price'>
            <View
              className='left goods-like-left'
            >{(process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') && item.is_free_visit && item.is_free_visit == 1 ?
              <Block><View style='visibility: hidden;' />
                <View className='snapped-up'>免费入园</View>
              </Block> : !item.price ?
                <Block><View style='visibility: hidden;' />
                  <View className='snapped-up'>去看看</View>
                </Block> : <Block>
                  {item.can_zero_buy != 1 ? <Block>
                      <View className='price'>
                        <View className='view-inline' style='margin-right: 3px'>
                          <Text className='mark view-inline' style={`color: ${dataColor.priceColor}`}>¥</Text>
                          <View className='mark main view-inline' style={`color: ${dataColor.priceColor}`}>
                            <Float value={item.price || 0} />
                          </View>
                        </View>
                        {
                          item.is_vip_price === 1 &&
                          <Text className='members-enjoy-text-big-box'>会员享</Text>
                        }
                        {(!!item.market_price || !!item.marketPrice) && <View className='m-min-b market-price view-inline'
                          style={`color: ${dataColor.originalPriceColor}`}
                        >¥{item.market_price || item.marketPrice || 0}</View>}
                      </View>
                    </Block> :
                    <Block>
                      <Text className='symbol0' style={`color: ${dataColor.priceColor}`}>¥</Text>
                      <Text className='number' style={`color: ${dataColor.priceColor};margin-right: 3px;`}>0</Text>
                      {(!!item.market_price || !!item.marketPrice) && <View className='m-min-b market-price view-inline'
                        style={`color: ${dataColor.originalPriceColor}`}
                      >¥{item.market_price || item.marketPrice || 0}</View>}
                      <Image className='zero-buy'
                        src={RESOURCE_URL + "/resources/weapp/images/zero.png"}
                      /></Block>}
                  {item.is_free_visit && item.is_free_visit == 1 && (process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') ?
                    <View className='recommendation-block-item-bottom-right'>
                      <View className='snapped-up'>免费入园</View>
                    </View> : <View className='recommendation-block-item-bottom-right'>
                      {/* 用户 */}
                      {(!process.env.DISTINGUISH_IDENTITY || props.isUser || !item.commission) &&
                      <View className='snapped-up'>{item.is_activity == 1 ? '立即拼团' : '立即抢购'}</View>}
                      {/* 达人 */}
                      {!props.isUser && !!item.commission && process.env.DISTINGUISH_IDENTITY &&
                      <View className='share-earn'>
                        <View className='share-left'>分享赚</View>
                        <View className='price'>
                          <Text>￥</Text>
                          <View className='true-price-share font-family-price'>
                            <Float value={item.commission || 0} />
                          </View>
                        </View>
                      </View>}
                    </View>}
                </Block>}
            </View>
          </View>
        </View>
      </View>)}
    </View>
  )
}
BigGoodsBox.defaultProps = {
  data: [],
  pkeys: '',
  isUser: true
}

export default BigGoodsBox
